<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-JQuery事件</title>
    <script src="../js/jquery-3.6.0.js"></script>
    <script>
        $(function () {
            // 单击事件
            $("input[type=button]:first").click(function () {
                alert("用户名" + $("input[name=username]").val());
            });

            // 双击事件
            $("input[type=button]").eq(1).dblclick(function () {
                alert("密码" + $("input[name=password]").val());
            });

            // 焦点事件
            $("input[name=username]").focus(function () {
                console.log("获取焦点");
            });
            $("input[name=username]").blur(function () {
                console.log("失去焦点");
            });

            // 改变事件
            $("input[name=username]").change(function () {
                console.log("改变的值" + $(this).val());
            });
            $("#city").change(function () {
                alert($(this).val());
            });

            // 鼠标事件
            /*// 鼠标移入
            $("#box").mouseenter(function () {
                console.log("鼠标移入");
                $(this).css(
                    {
                        backgroundColor: "red"
                    }
                )
            });
            // 鼠标移出
            $("#box").mouseleave(function () {
                console.log("鼠标移出");
                $(this).css(
                    {
                        backgroundColor: "pink"
                    }
                )
            });*/
            // 鼠标移动
            $("#box").mousemove(function () {
                console.log("鼠标移动");
            });
            $("#box").hover(
                function () {
                    console.log("鼠标移入");
                    $(this).css(
                        {
                            backgroundColor: "red"
                        }
                    )
                },
                function () {
                    console.log("鼠标移出");
                    $(this).css(
                        {
                            backgroundColor: "pink"
                        }
                    )
                }
            )
            // 键盘事件
            $("body").keydown(function () {
                $("body").css(
                    {
                        backgroundColor:"red"
                    }
                )
            });
            $("body").keyup(function () {
                $("body").css(
                    {
                        backgroundColor:"#fff"
                    }
                )
            });

        })
    </script>
</head>
<body>
<div id="box" style="width: 100px; height: 100px;border: 1px red solid;background-color:#359ef3;">我是盒子</div>

<form action="#">
    用户名：<input type="text" name="username">
    <br>
    密码：<input type="password" name="password">
    <br>
    <select name="city" id="city">
        <option>北京</option>
        <option>武汉</option>
        <option>上海</option>
        <option>广州</option>
    </select>
    <br>
    <input type="button" value="单机我弹出用户名">
    <input type="button" value="双击我弹出密码">
</form>
</body>
</html>